<template>
  <div class="listDetails">
    <div class="content">
      <transition name="chapter">
        <div class="chapter_box" v-if="tickteDetails.act_state_id == 4">
          <img src="@/assets/completed.png" alt="">
        </div>
        <div class="chapter_box" v-if="tickteDetails.act_state_id == 5">
          <img src="@/assets/closed.png" alt="">
        </div>
      </transition>
      <div class="top_box" @click="skipToPersonal(tickteDetails.creator_info.username)">
        <div class="img_box">
          <div class="image" v-show="!tickteDetails.creator_info.email">
            {{tickteDetails.creator_info.alias.substring(tickteDetails.creator_info.alias.length-2)}}
          </div>
          <van-image
            v-show="tickteDetails.creator_info.email"
            round
            width="1.1rem"
            height="1.1rem"
            fit="cover"
            lazy-load
            :src="tickteDetails.creator_info.email"
            />
        </div>
        <div class="right_text">
          <p class="name">{{tickteDetails.creator_info.alias}}</p>
        <p class="state" :class="tickteDetails.act_state_id == 4 ?'endstate':''">{{tickteDetails.state_info.name}}</p>
        </div>
      </div>
      <div class="content_box">
        <TicketView
          ref="TicketView"
          v-if="is_async_details"
          :fields="tickteDetails.field_list"
          :attribute="sub_field_attribute"
        ></TicketView>
      </div>

      <TicketLogs ref="ticketLogs"/>

    </div>
    
    <OperationButton
      ref="OperationButton"
      v-if="is_async_details"
      :tickteDetails='tickteDetails'
    ></OperationButton>
      
    <!-- 联系人 -->
    <transition name="van-slide-right">
      <contact ref="contact" @contactList="contactList"/>
    </transition>
  </div>
</template>

<script>
import contact from '@/components/contact.vue'
import TicketView from '@/components/TicketView.vue'
import OperationButton from '@/components/OperationButton'
import TicketLogs from '@/components/TicketLogs'
export default {
  data(){
    return{
      state_list:['草稿中','进行中','被退回','被撤回','已完成','已关闭'],
      tickteDetails:{
        creator_info:{
          alias:'',
        },
        state_info:{},
      },
      ticket_id:'',
      ticketLogs_list:[],
      executionTime_list:[],
      is_async_details:false,
      sub_field_attribute:'',
      form_data:{}
    }
  },
  components:{
    OperationButton,
    contact,
    TicketLogs,
    TicketView,
  },
  created(){
    if(this.$route.query.ticket_id){
      this.ticket_id = this.$route.query.ticket_id
      this.gatDetails(this.ticket_id)
    }
    
  },
  methods:{
    //获取工单详情
    gatDetails(id){
      this.$store.dispatch('api_get_ticket_detail',id).then(res=>{
        this.tickteDetails = res.data.data.value
        this.sub_field_attribute = this.tickteDetails.state_info.label
        this.$nextTick(()=>{
          this.is_async_details = true
        })
        console.log(this.tickteDetails,"详情")

        //标记当前抄送工单已读
        this.$store.dispatch('api_post_ticket_cc_read',this.tickteDetails.id).then(res=>{
          if(res.status == 200){
            console.log(res)
          }
        })
      })
    },
    // 联系人选择
    showContact(name){
      let opt = {
        title:"请选择" + name + "对象",
        is_deliverTicket: 'deliverTicket'
      }
      this.$refs.contact.show(opt)
    },
    contactList(list){
      this.$refs.OperationButton.deliverTicket(list)
    },
    //刷新页面
    refresh(){
      this.is_async_details = false
      this.gatDetails(this.ticket_id)
      this.$refs.ticketLogs.onLoadSearch(true)
    },
    //打开个人资料页
    skipToPersonal(userId){
      this.$dd.ready(()=>{
        this.$dd.biz.util.open({
          name:"profile",//页面名称
          params:{
            id:userId,
            corpId:this.$store.getters.corpId
          },//传参
          onSuccess : (res)=>{
            console.log(res)
          },
          onFail :(err)=>{
            console.log(err)
          }
        });
      })
    },
    changeForm(object) {
      let form_data = {}
      Object.keys(object).forEach(key=>{
        if(object[key] != null){
          form_data[key] = object[key]
        }
      })
      return form_data
    },
    // 获取表单内容
    getForm(item,incident){
      this.form_data = this.$refs.TicketView.getFormData(true)
      let fields = this.$refs.TicketView.getTitlefields()
      if(this.form_data){
        let data = {
          title:{
            name: `${this.tickteDetails.creator_info.alias}提交的${this.$route.query.workflow_name}`,
            fields
          }
        }
        let obj =  this.changeForm(this.form_data)
        Object.assign(data, obj)
        Object.keys(data).forEach(key=>{
          if(typeof data[key] == 'object'){
            data[key] = JSON.stringify(data[key])
          }
        })
        this.$refs.OperationButton.skipToHandleTicket(item,incident,data)
      }
    },
  },
}
</script>

<style lang="less" scoped>
*{
  box-sizing: border-box;
}
.listDetails{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  >.content{
    position: absolute;
    top:0;
    bottom: 50px;
    overflow-y: scroll;
    width: 100%;
    .top_box{
      display: flex;
      height:1.7333rem;
      width: 100%;
      border-bottom: 1px solid #F7F7F7;
      background: #fff;
      padding: 0.3rem 0.3rem 0 0.3rem;
      .image{
        width: 1.1rem;
        height: 1.1rem;
        background-color: rgb(58, 148, 250);
        color: #fff;
        text-align: center;
        line-height: 1.1rem;
        overflow: hidden;
        border-radius: 50%;
        font-size: 14px;
      }
      .right_text{
        padding: 0 0.2667rem;
        .name{
          margin: 0;
          font-size: 14px;
        }
        .state{
          font-size: 13px;
          margin: 0;
          color:#D6B480;
          line-height: 0.9rem;
        }
        .endstate{
          color: #07c160;
        }
      }
    }
    .content_box{
      position: relative;
      width: 100%;
      height: auto;
      margin-top: 10px;
    }
  }
  .content::-webkit-scrollbar{
      display:  none;
    }
  .chapter_box{
    position: absolute;
    top:-0.5333rem;
    right: 0;
    width: 3.7333rem;
    height: 3.7333rem;
    z-index:999;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .chapter-enter-active {
    animation: show .3s;
  }
  @keyframes show {
    0% {
      transform: scale(1.5);
      top:0px;
    }
    100% {
      transform: scale(1);
      top:-0.5333rem;
    }
  }
}
</style>